<!-- 调拨单记录 -->
<template>
    <div id="change">
        <div class="change-top">
            单据日期&nbsp;
            <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" size="small" style="width: 150px;"
                v-model="costAdjustHeader.createDate" type="date" placeholder="选择日期">
            </el-date-picker>
            &nbsp;&nbsp;
            <span>
                <el-button size="small" @click="saveCostAdjust">保存</el-button>
                <el-button size="small" type="success">审核</el-button>
            </span>
            <PublicLink />
        </div>
        <div class=" change-content">
            <el-table @row-click="handlerClick" :row-style="{ height: '55px' }" height="450px"
                :data="costAdjustHeader.detailList" border style="width: 100%;font-size: 13px;">
                <el-table-column width="120">
                    <el-button size="mini" @click="addRow"><i class="el-icon-circle-plus-outline"></i></el-button>
                    <el-button size="mini" @click="reduceRow"><i class="el-icon-remove-outline"></i></el-button>
                </el-table-column>
                <el-table-column prop="goodcode" label="商品编号" width="240">
                    <template slot-scope="scope">
                        <el-input style="width: 160px;" size="small" v-model="scope.row.goodcode"></el-input>
                        <el-button @click="goodsShow = true" size="small"><i class="el-icon-more"></i></el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="goodname" label="商品名称" width="120">
                </el-table-column>
                <el-table-column prop="unitname" label="单位" width="120">
                </el-table-column>
                <el-table-column prop="cost" label="调整金额" width="150">
                    <template slot-scope="scope">
                        <el-input size="small" v-model="scope.row.cost"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="wid" label="仓库" width="150">
                    <template slot-scope="scope">
                        <el-select size="small" v-model="scope.row.wid">
                            <el-option v-for="(wid, index) in storeList" :key="index" :label="wid.storeHomeName"
                                :value="wid.shId">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="detailRemark" label="备注" width="150">
                    <template slot-scope="scope">
                        <el-input size="small" v-model="scope.row.detailRemark"></el-input>
                    </template>
                </el-table-column>
            </el-table>
            <el-button style="position: relative;right: -1200px;" @click="goto('costChangeBill')">历史单据</el-button>
        </div>
    </div>
</template>

<script>
import PublicLink from '../public_com/PublicLink.vue';

export default {
    name: 'AddOutBound',
    components: {
        PublicLink,
    },
    data() {
        return {
            input: '',
            costAdjustHeader: {
                headerCode: '12121212',
                createDate: '',
                remark: '',
                detailList:
                    [
                        {
                            goodcode: '',
                            wid: '',
                            unit: '',
                            cost: '',
                            detailRemark: '',
                            unitname: ''
                        },
                    ],
            },
            storeList: []

        }
    },
    methods: {
        goto(to) {
            this.$router.push(to)
        },
        handlerClick(row, column, event) {
            this.tableData.forEach((store, index) => {
                store.isEdit = false
            })
            row.isEdit = true
        },
        successMessage(msg) {
            this.$message({
                message: msg,
                type: 'success'
            });
        },
        errorMessage(msg) {
            this.$message({
                message: msg
                ,
                type: 'error'
            })
        },
        getStoreList() {
            this.axios.get('/info/storeHouse/getAllStore',
                {
                    params: {
                        cId: 1
                    }
                }
            ).then(rs => {
                this.storeList = rs.data.storeList
            })
        },
        getCostAdjustById(headerId) {
            this.axios.get('/store/adjust/getCostAdjust',
                {
                    params: {
                        headerId
                    }
                }
            ).then(rs => {
                this.costAdjustHeader = rs.data.header
            })
        },
        saveCostAdjust() {
            const priceRegix = /^[1-9]\d+(\.\d{2})?$/
            if (this.costAdjustHeader.createDate == '') {
                this.errorMessage("请选择单据日期")
                return
            }
            for (var i = 0; i < this.costAdjustHeader.detailList.length; i++) {
                if (this.costAdjustHeader.detailList[i].goodcode == '') {
                    this.errorMessage("请填写第" + (i + 1) + "行商品编号");
                    return;
                }
                if (this.costAdjustHeader.detailList[i].wid == '') {
                    this.errorMessage("请选择第" + (i + 1) + "行的仓库");
                    return;
                }
                if (!priceRegix.test(this.costAdjustHeader.detailList[i].cost)) {
                    this.errorMessage("第" + (i + 1) + "行商品成本不合理");
                    return;
                }
            }
            this.axios.post("/store/adjust/updateCostAdjust",
                this.costAdjustHeader
            ).then(rs => {
                if (rs.data.code == 200) {
                    this.successMessage("修改成功")
                }
                else {
                    this.errorMessage("修改出错了")
                }
            })
        }
    },
    created() {
        this.getStoreList()
        const headerId = this.$route.query.headerId
        this.getCostAdjustById(headerId)
    }

}
</script>

<style scoped>
#change {
    width: 100%;
    height: 100%;
}

.change-top {
    width: calc(100% -20px);
    height: 60px;
    /* background-color: pink; */
    line-height: 60px;
    padding-left: 20px;
    font-size: 13px;
}

.change-content {
    width: 100%;
    height: calc(100% - 60px);
    margin-top: 40px;
    /* background-color: skyblue; */
}

.el-input,
.el-button {
    font-size: 13px;
}

/* 合计行整体样式修改开始 */
.el-table /deep/ .el-table__footer-wrapper tbody td {
    background-color: #fff1d4;
}

.el-table /deep/ .el-table__body tr:hover>td {
    background-color: #fff1d4;
}
</style>